import {HmiComponent} from "../../hmi";

export let FanComponent: HmiComponent = {
  id: "fan",
  name: "风机",
  icon: "/assets/hmi/fan.svg",
  group: "工业",

  //color: true,
  color: true,

  values: [
    {name: "open", label: "运行"},
    {name: "speed", label: "速度"},
  ],

  create() {
    //@ts-ignore
    this.element = this.$container.nested().attr("preserveAspectRatio", "xMidYMid meet")
    //@ts-ignore
    this.path = this.element.path("M512 1024C229.701818 1024 0 794.298182 0 512S229.701818 0 512 0s512 229.701818 512 512-229.701818 512-512 512z m0-36.584727c262.562909 0 475.415273-212.852364 475.415273-475.415273S774.562909 36.584727 512 36.584727 36.584727 249.437091 36.584727 512 249.437091 987.415273 512 987.415273z m-62.557091-464.430546a73.122909 73.122909 0 1 1 146.292364 0 73.122909 73.122909 0 0 1-146.292364 0z m-54.551273 0a128.558545 128.558545 0 0 0 91.136 99.886546c-33.605818 84.666182 41.053091 210.618182-96.209454 261.026909-72.238545 26.530909-276.805818-57.204364-162.210909-231.517091C279.272727 573.905455 341.736727 538.391273 394.891636 522.984727z m48.407273-73.076363C389.026909 375.296 236.590545 365.754182 271.825455 225.978182c18.618182-73.541818 209.221818-193.303273 294.772363-2.839273 38.493091 85.736727 33.326545 156.392727 16.104727 208.197818a139.077818 139.077818 0 0 0-53.992727-10.845091c-32.442182 0-62.231273 11.031273-85.410909 29.323637z m447.860364 40.96c54.830545 54.318545 64.930909 277.410909-142.894546 249.111272-93.602909-12.8-152.529455-54.272-189.067636-96.023272a131.258182 131.258182 0 0 0 52.596364-126.743273c91.601455-6.283636 175.150545-129.489455 279.365818-26.344727z")
      .fill("#FFFFFF")
    //@ts-ignore
    this.element.viewbox(this.path.bbox())

   //@ts-ignore
    //this.element.viewbox("0 0 1024 1024").attr("preserveAspectRatio", "xMinYMin meet")
    //this.element = this.$container.image().load("/assets/hmi/fan.svg")
    //this.element = this.$container.svg(`<svg viewBox="0 0 1024 1024" preserveAspectRatio="xMinYMin meet" width="200" height="200"><path d="M512 1024C229.701818 1024 0 794.298182 0 512S229.701818 0 512 0s512 229.701818 512 512-229.701818 512-512 512z m0-36.584727c262.562909 0 475.415273-212.852364 475.415273-475.415273S774.562909 36.584727 512 36.584727 36.584727 249.437091 36.584727 512 249.437091 987.415273 512 987.415273z m-62.557091-464.430546a73.122909 73.122909 0 1 1 146.292364 0 73.122909 73.122909 0 0 1-146.292364 0z m-54.551273 0a128.558545 128.558545 0 0 0 91.136 99.886546c-33.605818 84.666182 41.053091 210.618182-96.209454 261.026909-72.238545 26.530909-276.805818-57.204364-162.210909-231.517091C279.272727 573.905455 341.736727 538.391273 394.891636 522.984727z m48.407273-73.076363C389.026909 375.296 236.590545 365.754182 271.825455 225.978182c18.618182-73.541818 209.221818-193.303273 294.772363-2.839273 38.493091 85.736727 33.326545 156.392727 16.104727 208.197818a139.077818 139.077818 0 0 0-53.992727-10.845091c-32.442182 0-62.231273 11.031273-85.410909 29.323637z m447.860364 40.96c54.830545 54.318545 64.930909 277.410909-142.894546 249.111272-93.602909-12.8-152.529455-54.272-189.067636-96.023272a131.258182 131.258182 0 0 0 52.596364-126.743273c91.601455-6.283636 175.150545-129.489455 279.365818-26.344727z" fill="#ffffff"></path></svg>`).first()
  },

  setup(props: any): void {
    //@ts-ignore
    let p = this.$properties
    if (props.hasOwnProperty("width") || props.hasOwnProperty("height"))//@ts-ignore
      this.element.size(p.width, p.height)
    if (props.hasOwnProperty("fill"))//@ts-ignore
      this.path.fill(p.fill)
    if (props.hasOwnProperty("x") || props.hasOwnProperty("y"))//@ts-ignore
      this.element.move(p.x, p.y)
  },

  update(values: any) {
    if (values.speed > 0) {
      //@ts-ignore
      //this.product.animate().ease('-').transform({rotate:90, origin: 'center'}).loop()
      this.element.animate().ease('-').transform({rotate:120}).loop()
    }
  }
}
